<template>
  <div class="question-list-root">
    <div class="top-nav">
      <div class="left">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1"><SvgIcon class="mr-step" name="zu11185a1"></SvgIcon>活动</el-menu-item>
          <el-menu-item index="2" @click="router.push('/templates')" v-if="isManagers"><SvgIcon class="mr-step" name="zu11188"></SvgIcon>模板</el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="content-wrap">
      <SliderBar :menus="spaceMenus" @select="handleOptionSelect" />
      <div class="list-content">
        <div class="top">
          <h2>{{ optionTypeName }}</h2>
          <div class="operation" v-if="optionType===OptionType.Personal|| optionType===OptionType.All && isManagers">
            <el-button
              class="btn space-btn"
              type="default"
              @click="onCreate"
            >
              <SvgIcon class="mr-step" name="zu11185"></SvgIcon>
              <span>新建活动</span>
            </el-button>
            <el-button
              class="btn create-btn"
              type="default"
              @click="onSpaceCreate"
            >
              <SvgIcon class="mr-step" name="zu11431"></SvgIcon>
              <span>创建分类</span>
            </el-button>
          </div>
        </div>
        <div class="list-content-bottom">
          <BaseList
            :hasAuth="optionType===OptionType.Personal|| optionType===OptionType.All && isManagers"
            :key="resetPage"
            :loading="loading"
            :data="formsList"
            :total="resetPage"
            @reflush="fetchFormsList"
          ></BaseList>
        </div>
      </div>
    </div>
    <SpaceModify
      v-if="showSpaceModify"
      :type="modifyType"
      :parentId="workSpaceId"
      :visible="showSpaceModify"
      @on-close-codify="onCloseModify"
    />

    <SurveryModify
      v-if="showSurveryModify"
      :type="modifyType"
      :visible="showSurveryModify"
      @on-close-codify="onCloseSurvery"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import BaseList from './components/BaseList.vue'
import SliderBar from './components/SliderBar.vue'
import SpaceModify from './components/SpaceModify.vue'
import SurveryModify from './components/SurveryModify.vue'
import SvgIcon from '@common/SvgIcon/index.vue'
import { OptionType } from '@/management/utils/types/formsTypes'
import * as cnt from '@/management/utils/constant'
import { hasIntersection } from '@/management/utils/index'

const store = useStore()
const router = useRouter()

const loading = ref(false)
const formsList = computed(() => {
  return store.state.dataform.formsList
})

const activeIndex = ref('1')

const spaceMenus = computed(() => {
  const menus = store.state.dataform.optionMenus
  return menus.filter((item) => {
    return !item.role || hasIntersection((window.$app?.user?.roleIdList || []), item.role)
  })
})

const optionType = computed(() => {
  return store.state.dataform.optionType
})

const optionTypeName = computed(() => {
  return spaceMenus.value.find((item) => item.id === optionType.value)?.name
})

const workSpaceId = computed(() => {
  return store.state.dataform.workSpaceId
})

const isManagers = computed(() => {
  return hasIntersection((window.$app?.user?.roleIdList || []), ['dataform_manager'])
})

const handleOptionSelect = (id) => {
  let oType = id
  if (id.indexOf('_') > -1) {
    oType = id.split('_')[1]
    let pId = id.split('_')[0]
    store.commit('dataform/changeWorkSpace', pId)
  } else {
    store.commit('dataform/changeWorkSpace', '-1')
  }
  store.commit('dataform/changeOptionType', oType)
  fetchFormsList()
}

onMounted(async () => {
  if (hasIntersection((window.$app?.user?.roleIdList || []), cnt.ROLE_STUDENT_GUARDIAN)) {
    await store.commit('dataform/changeOptionType', OptionType.Others)
    fetchFormsList()
  } else {
    fetchDirectoryList()
    fetchFormsList()
  }
})

const fetchDirectoryList = () => {
  store.dispatch('dataform/getDirectoryList')
}

const resetPage = ref(0)
const fetchFormsList = async (params) => {
  if (!params) {
    resetPage.value = new Date().getTime()
    store.commit('dataform/setFormsTotal', 0)
    store.commit('dataform/setFormsHasMore', true)
    params = {
      pageSize: 100,
      curPage: 1
    }
  } else if (params.curPage === 1) {
    resetPage.value = new Date().getTime()
    store.commit('dataform/setFormsTotal', 0)
    store.commit('dataform/setFormsHasMore', true)
  }
  if (workSpaceId.value) {
    params.parentId = workSpaceId.value
  }
  loading.value = true
  await store.dispatch('dataform/getFormsList', params)
  loading.value = false
}

const modifyType = ref('add')
const showSpaceModify = ref(false)
const showSurveryModify = ref(false)

const onCloseModify = () => {
  showSpaceModify.value = false
  fetchFormsList()
}

const onSpaceCreate = () => {
  showSpaceModify.value = true
}

const onCreate = () => {
  showSurveryModify.value = true
}

const onCloseSurvery = (type) => {
  showSurveryModify.value = false
}
</script>

<style lang="scss" scoped>
.question-list-root {
  height: 100%;
  background-color: #f6f7f9;

  .top-nav {
    background: #f6f7f9;
    color: #4a4c5b;
    padding: 0 20px;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);

    .left {
      display: flex;
      align-items: center;
      width: calc(100% - 200px);
      .logo-img {
        width: 90px;
        height: 40px;
        padding-right: 20px;
      }
      .el-menu {
        width: 100%;
        height: 56px;
        border: none !important;
        background-color: #f6f7f9;
        :deep(.el-menu-item, .is-active) {
          border: none !important;
        }
        :deep(.el-menu-item.is-active::before) {
          background: transparent;
        }
      }
    }
    .login-info {
      display: flex;
      align-items: center;
      .login-info-img {
        margin-left: 10px;
        height: 30px;
        margin-top: -6px;
      }

      .logout {
        margin-left: 20px;
      }

      .to-vip {
        color: #7B4400;
        display: inline-block;
        background: #F7F0E7;
        border-radius: 4px;
        padding: 2px 10px;
        cursor: pointer;
      }
    }

    span {
      cursor: pointer;
      color: #333;
    }
  }
  .content-wrap {
    position: relative;
    height: calc(100% - 57px);
  }
  .list-content {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0px 0px 0px 200px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: scroll;
    background-color: #fff;

    .top {
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 32px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      .operation {
        flex: 0 1 auto;
        display: flex;
      }

      h2 {
        font-weight: normal;
        font-size: 18px;
        height: 32px;
        line-height: 32px;
      }

      .create-btn {
        background: #fff;
      }
      .space-btn {
        background: #fff;
      }
      .btn {
        // width: 132px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        color: #333;
        padding-left: 5px;
        padding-right: 5px;
        .icon-chuangjian {
          padding-right: 8px;
          font-size: 14px;
        }

        span {
          font-size: 14px;
        }
      }
    }
    .btn:hover {
      color: $primary-color;
    }

    .list-content-bottom {
      padding: 10px 32px 32px;
    }
  }
}

.tw-svg {
  width: 16px!important;
  height: 16px!important;
  margin-right: 5px;
}
</style>
